<template>
  <div>
      <div v-for="(value, key, index) in obj" :key="index">
          <h4>
              {{ key }}
          </h4>
          <ul>
              <li v-for="(item, indexs) in value" :key="indexs">
                  {{ item.Name }}
              </li>
          </ul>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            obj: {}
        }
    },
    created() {
        // let list = [
        //     {
        //         classify: "A",
        //         children: [
        //             {
        //                 title: "奥迪"
        //             }
        //         ]
        //     }
        // ]

        // let obj = {
        //     "A": [{ title: "奥迪" }, { title: "阿斯顿马丁" }]
        // }


        axios.get("http://baojia.chelun.com/v2-car-getMasterBrandList.html").then(res => {
            // 存储数据
            let arr = res.data.data
            let obj = {}

            // 拿到首字母, 并且添加到对象中(key)
            arr.forEach(item => {
                // 拿到首字母
                let spell = item.Spelling.slice(0, 1)
                
                // 对obj[spell] 进行赋值
                // 1  obj.A = [item]
                // 2  obj.A.push()
                // 3  
                // 4

                // 是否第一次对key进行赋值
                // obj.A
                // obj
                // 第二次及以后的情况
                if (obj[spell]) {
                    obj[spell].push(item)
                } else {
                    // 第一次给obj添加key
                    obj[spell] = [item]
                }
            })
            this.obj = obj
        })
    }
}
</script>

<style>

</style>